<template>
  <div class="stack-carousel">
    <el-button class="nav-btn left" @click="prev" circle>
      <el-icon>
        <ArrowLeft />
      </el-icon>
    </el-button>
    <div class="carousel-stack">
      <div v-for="(img, idx) in images" :key="idx" class="carousel-item" :style="itemStyle(idx)"
        :class="{ active: idx === current }">
        <img :src="img" />
      </div>
    </div>
    <el-button class="nav-btn right" @click="next" circle>
      <el-icon>
        <ArrowRight />
      </el-icon>
    </el-button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
defineOptions({
  name: 'StackCarousel',
})
const props = defineProps({
  images: {
    type: Array,
    required: true,
  },
  visibleCount: {
    type: Number,
    default: 3, // 同时堆叠显示几张
  },
})

const current = ref(0)

const prev = () => {
  current.value = (current.value - 1 + props.images.length) % props.images.length
}
const next = () => {
  current.value = (current.value + 1) % props.images.length
}

const itemStyle = (idx) => {
  const total = props.images.length
  let pos = (idx - current.value + total) % total
  if (pos >= props.visibleCount) return { display: 'none' }
  return {
    zIndex: props.visibleCount - pos,
    transform: `translateX(${pos * 30}px) scale(${1 - pos * 0.08}) rotate(${pos * 2}deg)`,
    opacity: 1 - pos * 0.18,
    transition: 'all 0.5s cubic-bezier(.34,1.56,.64,1)',
  }
}
</script>

<style scoped lang="scss">
.stack-carousel {
  position: relative;
  width: 400px;
  height: 260px;
  margin: 0 auto;
  display: flex;
  align-items: center;

  .carousel-stack {
    position: relative;
    width: 320px;
    height: 220px;
    margin: 0 auto;
    perspective: 800px;
  }

  .carousel-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 320px;
    height: 220px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.18);
    background: #fff;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      user-select: none;
      pointer-events: none;
    }
  }

  .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    &.left {
      left: -40px;
    }

    &.right {
      right: -40px;
    }
  }
}
</style>